<script>
import {addartical} from '../api'
export default {
    name:'editor',
    data(){
        return{
            title:'',
            content:'',
            tags:[],
            tagedit:false,
            tag:'',
            editorOption:{}
        }
    },
    mounted(){
        document.querySelector('.main').style.width = '800px'
        document.querySelector('.foot').style.width = '800px'
    },
    beforeDestroy(){
        document.querySelector('.main').style.width = '500px'
        document.querySelector('.foot').style.width = '500px'
    },
    methods:{
        onEditorBlur(quill) {
            console.log('editor blur!', quill)
        },
        onEditorFocus(quill) {
            console.log('editor focus!', quill)
        },
        onEditorReady(quill) {
            console.log('editor ready!', quill)
        },
        save(){
            console.log({
                content:this.content,
                text:this.title,
                tags:this.tags
            })
            let data = {
                content:this.content,
                text:this.title,
                tags:this.tags
            }
            addartical(data).then(res=>{
                if(res.status===200){
                    this.$router.push('/')
                }else{
                    alert(res.msg)
                }
            })
        },
        addTag(){
            if(this.tag){
                this.tags.push(this.tag);
            }
            this.tag = '';
            this.tagedit = false ;
        },
        editTag(){
            this.tagedit = true;
            this.$nextTick().then(()=>{
                document.querySelector('.newtag').focus()
            })
        },
        delTag(id){
            this.tags.splice(id,1)
        }
    }
}
</script>
<template>
    <div class="editor">
        <p style="font-size:24px">Write</p>
        <input type="text" class="title" v-model="title">
        <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)"
                >
        </quill-editor>
        <ul class="tags">
            <template
            v-for="(tag,idx) in tags"
            >
                <li 
                class="tag"
                :key="idx"
                >{{tag}}
                <span 
                class="deltag"
                @click="delTag(idx)"
                >del</span>
                </li>
            </template>
            <li>
                <input 
                v-show="tagedit"
                class="newtag"
                v-model="tag"
                autofocus
                @blur="addTag"
                @keyup.enter="addTag"
                type="text">
                <span
                v-show="!tagedit"
                @click="editTag"
                >添加标签</span>
            </li>
        </ul>
        <button
        @click="save"
        >提交</button>
    </div>
</template>
<style lang="stylus">
.ql-container
    height 500px !important
.editor
    width 800px
    padding: 25px 15px;
    border-bottom: 1px solid #e6e6e6;
.tags
    position relative
    height 26px
    margin-top 16px
    li 
        cursor pointer
        list-style none 
        display inline-block
        font-size 12px
        &.tag
            position relative
            margin-right 10px
            position relative
            .deltag
                position absolute
                width 100%
                text-align center
                top 0 
                color #fff
                background-color #000
                opacity 0
                transition .3s 
            &:hover>.deltag
                opacity 1
        .newtag
            padding 3px 10px
            height 25px
            margin-bottom 0
            width 80px
</style>

